<template>
  <div class="head">
    <div class="headContent">
      <div class="content-img">
        <router-link to="/">
          <!-- <img src="@/assets/images/headLogo.png" /> -->
        </router-link>
      </div>
      <TagsView></TagsView>
      <!-- <el-row>
        <el-col :sm="0" :md="0" :lg="0" :xl="0">
          <div class="headmobileIcon">
            <i class="el-icon-s-fold headMorerouter" @click="handelSwitch" />
          </div>
        </el-col>
      </el-row> -->
      <div
        class="
          foldNav
          hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only
        "
      >
        <ul :class="{ foldNavheight: switchRouter }">
          <li
            v-for="(item, index) in barData"
            :key="index"
            :class="{ active: currentRouterIndex == index }"
          >
            <router-link :to="{ name: item.routeName }">
              <div>
                {{ item.name }}
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <el-row class="hidden-xs-only">
        <el-col class="hidden-xs-only">
          <div class="contentRouter">
            <div class="barPage">
              <!-- <el-row :gutter="20">
                <el-col
                  :span="24 / barData.length"
                  v-for="(item, index) in barData"
                  :key="index"
                >
                  <router-link :to="{ name: item.routeName }">
                    <div
                      class="heaadRouteName"
                      :class="{ active: currentRouterIndex == index }"
                    >
                      {{ item.name }}
                    </div>
                  </router-link>
                </el-col>
              </el-row> -->
              <!-- <ul>
                <li v-for="(item, index) in barData" :key="index">
                  {{ item.name }}
                </li>
              </ul> -->
            </div>
            <div class="barUser" v-if="!userInfo.accessToken">
              <el-row :gutter="20">
                <el-col :span="24 / barData.length"
                  ><div class="heaadRouteName">
                    <router-link :to="{ name: 'Login' }">登录</router-link>
                  </div></el-col
                >
                <el-col :span="24 / barData.length"
                  ><div class="heaadRouteName">
                    <router-link :to="{ name: 'Register' }">注册</router-link>
                  </div></el-col
                >
              </el-row>
            </div>
            <div v-if="userInfo.accessToken" class="barUser isLogin">
              <el-popover
                placement="bottom"
                trigger="hover"
                :popper-class="'myControlPop'"
                v-model="showPopver"
              >
                <div class="userInfoBox">
                  <div class="userPicBox">
                    <router-link :to="{ name: 'User' }">
                      <img v-lazy="headPic" />
                    </router-link>
                  </div>
                  <div class="desc">
                    <div class="userName">
                      <span class="name">{{userInfo.nickName || userInfo.regName || userInfo.email }}</span>
                      <router-link :to="{ name: 'User' }">
                        <span style="font-size: 15px; margin-left: 9px;">个人中心</span>
                      </router-link>
                    </div>
                    <div>
                      <div
                        class="userType"
                        v-for="(item, index) in userInfo.authName"
                        :key="index"
                      >
                        {{ item }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="routeLinkBox">
                  <!-- <router-link
                    :to="{ name: item.routeName }"
                    v-for="(item, index) in filterRoute"
                    :key="index"
                  > -->
                  <div
                    v-for="(item, index) in filterRoute"
                    :key="index"
                    class="routeLink"
                    :style="{ 'margin-top': index <= 1 ? 0 : '' }"
                    :class="{ 'right-routeLink': (index + 1) % 2 === 0 }"
                    @click="handleToRouter(item)"
                  >
                    <img v-lazy="item.iconPath" />
                    <span>{{ item.name }}</span>
                  </div>
                  <!-- </router-link> -->
                </div>
                <div class="historyBox">
                  <div class="noData" v-if="!countCourses.length">暂无数据</div>
                  <div class="scrollBox">
                    <div
                      class="historyDetial"
                      v-for="(item, index) in countCourses"
                      :key="index"
                    >
                      <div class="name">
                        <img
                          src="../../../../assets/images/handelHistory.png"
                        />
                        <span :title="item.name">{{
                          item.name || "【缺课程名称】"
                        }}</span>
                      </div>
                      <div class="continue">
                        <span @click="handleJumpRoute(item)">{{
                          `继续${item.type}`
                        }}</span>
                        <img
                          src="../../../../assets/images/closeHistory.png"
                          @click="removeTrackCourses(item)"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="logout" @click="handelLogout">退出登录</div>
                <div slot="reference" class="userPic">
                  <img v-lazy="headPic" />
                </div>
              </el-popover>
              <!-- <el-dropdown placement="bottom">
                <span class="el-dropdown-link userInfo">
                  {{ userInfo.regName }}
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                  <router-link :to="{ name: 'User' }">
                    个人中心
                  </router-link>
                  </el-dropdown-item>
                  <router-link :to="{ name: 'Choose' }">
                    <el-dropdown-item> 已选课程 </el-dropdown-item>
                  </router-link>
                  <router-link :to="{ name: 'Teacher' }">
                    <el-dropdown-item> 我的授课 </el-dropdown-item>
                  </router-link>
                  <router-link :to="{ name: 'Creative' }">
                    <el-dropdown-item> 创作中心 </el-dropdown-item>
                  </router-link>
                  <el-dropdown-item @click.native="handelLogout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapAction } from "vuex";
import { logout } from "@/request/user";
import { defaultRoute } from "@/util/routePathAuth";
import { location, location_QuestionBank } from "@/util/tool";
import TagsView from "../TagsView/index";
export default {
  name: "headNav",
  components: {
    TagsView,
  },
  data() {
    return {
      defaultIndex: 0,
      //
      switchRouter: false,
      // 默认路由
      barData: [
        // {
        //   name: '首页',
        //   routeName: 'Home',
        // },
        // {
        //   name: '教师团队',
        //   routeName: 'Teachers',
        // },
        // {
        //   name: '专业领域',
        //   routeName: 'Professional',
        // },
        // {
        //   name: '学习课程',
        //   routeName: 'CoursesList',
        // },
        // {
        //   name: '在读生',
        //   routeName: 'Students',
        // },
        // {
        //   name: '毕业生',
        //   routeName: 'Graduate',
        // },
        // {
        //   name: '合作企业',
        //   routeName: 'Enterprise',
        // },
        // {
        //   name: '游戏对战',
        //   routeName: 'Game',
        // },
        // {
        //   name: '题库练习',
        //   routeName: 'Questionbank',
        // },
      ],
      // 默认路由分配给用户
      defaultRoute: defaultRoute,
      // 历史记录 学习 创作 批阅
      historyData: [
        // {
        //   courseID: 1,
        //   name: "网页设计技术",
        //   type: "批阅",
        // },
        // {
        //   courseID: 2,
        //   name: "大数据信息可视化",
        //   type: "学习",
        // },
        // {
        //   courseID: 3,
        //   name: "React 17 结合TS打造旅游电商平台",
        //   type: "学习",
        // },
        // {
        //   courseID: 4,
        //   name: "Flutter进阶实战",
        //   type: "创作",
        // },
        // {
        //   courseID: 5,
        //   name: "微信小程序商城实战",
        //   type: "创作",
        // },
      ],
      roleFlag: [],
      roleName: [
        // "家长",
        // "招聘企业",
        // "导师",
        // "课程设计师",
        // "教务",
        // "社会学员",
        // "企业团购学员",
      ],
      showPopver: false
    };
  },
  watch: {
    userInfo(n, o) {
      // this.formatRoleFlag();
      this.roleFlag = this.userInfo.authNum;
    },
    chooseCourses(n, o) {
      this.historyData = n;
    },
  },
  computed: {
    currentRouterIndex() {
      let flag = false;
      this.barData.find((item, index) => {
        if (
          this.$route.path.indexOf(item.routeName.toLowerCase()) !== -1 ||
          this.$route.name == item.routeName
        ) {
          flag = true;
          this.defaultIndex = index;
        }
      });
      if (!flag) {
        return -1;
      }
      return this.defaultIndex;
    },
    ...mapState({
      userInfo: (state) => {
        return state.user.userInfo;
      },
      chooseCourses: (state) => {
        return state.courses.chooseCourses;
      },
      filterChooseCourses: (state) => {
        return state.courses.filterChooseCourses
      },
      designcourselist: (state) => {
        return state.courses.designcourselist;
      },
    }),
    filterRoute() {
      let roleFlag = this.roleFlag;
      if (typeof roleFlag === "number") {
        roleFlag = [roleFlag];
      }
      let newRouteData = [];
      this.defaultRoute.forEach((item) => {
        roleFlag.forEach((ritem) => {
          if (item.rule.indexOf(ritem) !== -1) {
            newRouteData.push(item);
          }
        });
      });
      newRouteData = [...new Set(newRouteData)];
      return newRouteData;
    },
    headPic() {
      return this.userInfo.iconPath === "/iconPath.png"
        ? require("@/assets/images/headPic.svg")
        : this.userInfo.iconPath;
    },
    countCourses() {
      let courses = [...this.filterChooseCourses, ...this.designcourselist];
      return courses;
    },
  },
  created() {
    this.roleFlag = this.userInfo.authNum;
    // 获取store内保存的已选课程数据
    this.historyData = this.chooseCourses;
  },
  methods: {
    // 展开/关闭导航栏
    handelSwitch() {
      this.switchRouter = !this.switchRouter;
    },
    // 退出登录
    handelLogout() {
      this.$store.dispatch("user/Logout");
    },
    // 跳转路由
    handleToRouter(item) {
      if (item.routeName === "questionBank") {
        window.open(location_QuestionBank(window));
        return;
      }
      // window.open(`http://localhost:8080${routeName}`);
      this.$router.push({ name: item.routeName, query: item.query ? item.query : {}});
      this.showPopver = false
    },
    // formatRoleFlag() {
    //   let nRoleFlag = this.userInfo.roleFlag;
    //   // 1大学生 // 2教师 // 4中小学生 // 8家长 // 16招聘企业 // 32导师 // 64课程设计师 // 128教务 // 256社会学员 // 512企业团购学员
    //   let authArr = [
    //     { role: 1, name: "大学生" },
    //     { role: 2, name: "教师" },
    //     { role: 4, name: "中小学生" },
    //     { role: 8, name: "家长" },
    //     { role: 16, name: "招聘企业" },
    //     { role: 32, name: "导师" },
    //     { role: 64, name: "课程设计师" },
    //     { role: 128, name: "教务" },
    //     { role: 256, name: "社会学员" },
    //     { role: 512, name: "企业团购学员" },
    //   ];
    //   // let authArr = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512];
    //   let markLabel = [];
    //   let markAuth = [];
    //   for (let i = 0; i < 10; i++) {
    //     if (
    //       (nRoleFlag & Number(authArr[i].role).toString(2)) ===
    //       authArr[i].role
    //     ) {
    //       markAuth.push(authArr[i].role);
    //       markLabel.push(authArr[i].name);
    //     }
    //   }
    //   this.roleFlag = markAuth;
    //   this.roleName = markLabel;
    // },
    removeTrackCourses(cItem) {
      this.$store.dispatch("courses/removeTrackCourses", cItem);
    },
    handleJumpRoute(item) {
      if (item.type === "创作") {
        this.$router.push({
          name: "Creativeourse",
          query: { courseID: item.courseID },
          params: { id: item.courseID },
        });
      }
      if (item.type === "学习") {
        this.$router.push({
          name: "Curr",
          // query: { currNo: item.currNo, courseId: item.courseID },
          params: { id: item.currNo },
        });
      }
    },
  },
};
</script>

<style lang="stylus">
.head {
  position: sticky;
  top: 0;
  z-index: 999;
  // background: #ff8a63;
  background: #fff;
  background-color: #ffffff;
  box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.16);
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);

  .headContent {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1600px;
    height: 73px;

    .content-img {
      width: 50px;
      height: 50px;

      img {
        object-fit: contain;
        user-select: none;
        // width: 100%;
        height: 100%;
      }
    }

    .headmobileIcon {
      i {
        cursor: pointer;
        margin-right: 10px;
        font-size: 2rem;
      }
    }

    .foldNav {
      z-index: 99;
      position: absolute;
      top: 3.781rem;
      background: #ff8a63;

      .foldNavheight {
        height: 315px;
      }

      ul {
        width: calc(100vw);
        padding: 0;
        margin: 0;
        height: 0;
        overflow: hidden;
        list-style: none;
        transition: height 0.2s linear;

        li {
          cursor: pointer;
          position: relative;
          line-height: 35px;

          div {
            font-size: 0.8rem;
            color: #80655d;
            padding: 0 1rem;
          }
        }

        .active {
          color: #019cab;
          background: #f69372;

          div {
            color: #019cab;
          }
        }

        li::after {
          position: absolute;
          left: 0;
          width: 100%;
          bottom: 0;
          content: '';
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }
      }
    }

    .contentRouter {
      display: flex;

      .barPage {
        .heaadRouteName {
          color: #999;
          // color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
        }

        .el-col {
          position: relative;
          line-height: 73px;
        }

        .active {
          color: rgba(0, 0, 0, 0.6);
        }

        .active::after {
          position: absolute;
          left: 0;
          width: 100%;
          bottom: 0;
          content: '';
          border-bottom: 1px solid #019cab;
        }
      }

      .barUser {
        margin-right: 2px;
        // margin-left: 30px;
        min-width: 100px;
        display: flex;
        align-items: center;

        .el-row {
          margin: 0 !important;
        }

        .heaadRouteName {
          font-size: 14px;
        }

        .userInfo {
          cursor: pointer;
        }

        .userPic {
          cursor: pointer;
          width: 40px;
          height: 40px;

          img {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            border: solid 1px #707070;
            border-radius: 50%;
            // image-rendering: -webkit-optimize-contrast;
          }
        }
      }

      .isLogin {
        min-width: unset;
      }
    }
  }
}

.myControlPop {
  padding: 30px 20px 12px !important;
  width: 350px;
  min-height: 435px;
  background-color: #ffffff;
  box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.16);
  border-radius: 10px;

  .userInfoBox {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .desc {
      margin-left: 19px;
      height: 90px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      felx: 1;

      .userName {
        display: flex;
        align-items: flex-end;
        line-height: 1;
        font-family: PMingLiU-ExtB;
        font-size: 20px;
        color: #707070;

        .name {
          max-width: 110px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        a:hover {
          color: #5e7ff1;
        }
      }

      .userType {
        margin-top: 10px;
        margin-right: 5px;
        width: fit-content;
        display: inline-block;
        height: 21px;
        padding: 1px 2px;
        line-height: 21px;
        background-color: #fea91b;
        border-radius: 5px;
        font-family: PMingLiU-ExtB;
        font-size: 14px;
        color: #ffffff;
      }
    }

    .userPicBox {
      width: 90px;
      height: 90px;

      img {
        cursor: pointer;
        width: 90px;
        height: 100%;
        border-radius: 50%;
        // background-color: #e1e8ec;
        image-rendering: -webkit-optimize-contrast;
      }
    }
  }

  .routeLinkBox {
    margin: 35px auto 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    width: 256px;

    a {
      margin-top: 25px;
    }

    .routeLink {
      cursor: pointer;
      margin-top: 25px;
      display: flex;
      min-width: 91px;
      justify-content: flex-start;
      align-items: center;
      font-family: PMingLiU-ExtB;
      font-size: 16px;
      color: #333333;

      .right-routeLink {
        margin-left: 72px;
      }

      img {
        object-fit: cover;
        max-width: 22px;
        min-height: 21px;
        max-height: 22px;
        margin-right: 5px;
      }
    }

    .routeLink:hover {
      color: #5e7ff1;
    }
  }

  .historyBox {
    padding: 11px 0 12px;
    width: 311px;
    height: 152px;
    background-color: #eff9ff;
    border-radius: 10px;

    .noData {
      text-align: center;
    }

    .scrollBox {
      padding: 0 20px 0 15px;
      height: 100%;
      overflow-y: scroll;

      .historyDetial {
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          display: flex;
          align-items: center;

          img {
            width: 16px;
            height: 16px;
          }

          span {
            display: inline-block;
            max-width: 170px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 10px;
            font-weight: bold;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #666666;
          }
        }

        .continue {
          span {
            cursor: pointer;
            margin-right: 10px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #77b1ea;
          }

          img {
            cursor: pointer;
            width: 10px;
            height: 9px;
          }
        }
      }

      .historyDetial:last-child {
        margin-bottom: 0;
      }
    }

    .scrollBox::-webkit-scrollbar {
      width: 0;
      height: 1px;
    }

    /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
    .scrollBox::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 1px #bfc4c3;
      background: #dbdbdb;
    }

    /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
    .scrollBox::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px #E6FAF3;
      border-radius: 4px;
    }
  }

  .logout {
    cursor: pointer;
    margin-top: 8px;
    line-height: 1;
    text-align: center;
    font-family: PMingLiU-ExtB;
    font-size: 14px;
    color: #999999;
  }
}
</style>